<script setup lang="ts" name="layout">
import AppConfigDrawer from '@/components/layouts/app-config-drawer/app-config-drawer.vue'
import {
  useAppConfigStore,
  useAppConfigUserStore,
  useAuthMenuAndButtonStore
} from '@/stores'
import { onBeforeMount } from 'vue'
import useResponsive from '@/hooks/useResponsive'
import Loading from '@/components/loading.vue'

const LayoutComponents: { [key: string]: any } = {
  classicLayout: defineAsyncComponent(
    () => import('./modules/classicLayout.vue')
  ),
  topMenuLayout: defineAsyncComponent(
    () => import('./modules/topMenuLayout.vue')
  ),
  mobileLayout: defineAsyncComponent(() => import('./modules/mobileLayout.vue'))
}

const { isMobile } = storeToRefs(useAppConfigStore())
const appConfigUserStore = useAppConfigUserStore()
const { layoutConfig } = storeToRefs(appConfigUserStore)
const authMenuAndButtonStore = useAuthMenuAndButtonStore()
authMenuAndButtonStore.getAuthButtonList() //获取权限按钮列表
authMenuAndButtonStore.getAuthRouteList() // 获取权限路由列表

useResponsive(true) //初始化响应式
//初始化主题和布局
onBeforeMount(() => {
  appConfigUserStore.switchDark()
  appConfigUserStore.changePrimary(appConfigUserStore.themeConfig.primaryColor)
  if (appConfigUserStore.themeConfig.isGrey) {
    appConfigUserStore.changeGreyOrWeak(true, 'grey')
  }
  if (appConfigUserStore.themeConfig.isWeak) {
    appConfigUserStore.changeGreyOrWeak(true, 'weak')
  }
})

const layout = computed(() =>
  isMobile.value
    ? LayoutComponents.mobileLayout
    : LayoutComponents[layoutConfig.value.layout]
)
</script>

<template>
  <suspense>
    <template #default>
      <component :is="layout" />
    </template>
    <template #fallback>
      <Loading />
    </template>
  </suspense>
  <AppConfigDrawer></AppConfigDrawer>
</template>

<style lang="scss" scoped></style>
